<template>
  <div class="promo_list">
    <ul>
      <li v-for="summer1 in summerhot2" :key="summer1.id">
        <div class="figure_img1">
          <img :src="summer1.img" alt="" />
        </div>
        <div class="good_title1">
          <p class="title_p">
            <span>{{ summer1.baojia }}</span
            >{{ summer1.name }}
          </p>
          <p class="title_desc1">{{ summer1.desc }}</p>
          <p class="title_price1">
            <span>￥{{ summer1.newprice }}</span
            ><del>￥{{ summer1.oldprice }}</del>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ActiveList",
  data() {
    return {
      summerhot2: [
        {
          img: require("../../../../../public/xiaxia/imgs/1.png"),
          name: "nava 9",
          baojia: "保价618",
          desc: "纤薄轻盈机身",
          newprice: 2599,
          oldprice: 2899,
        },
         {
          img: require("../../../../../public/xiaxia/imgs/1.png"),
          name: "nava 9",
          baojia: "保价618",
          desc: "纤薄轻盈机身",
          newprice: 2599,
          oldprice: 2899,
        },
         {
          img: require("../../../../../public/xiaxia/imgs/1.png"),
          name: "nava 9",
          baojia: "保价618",
          desc: "纤薄轻盈机身",
          newprice: 2599,
          oldprice: 2899,
        },
         {
          img: require("../../../../../public/xiaxia/imgs/1.png"),
          name: "nava 9",
          baojia: "保价618",
          desc: "纤薄轻盈机身",
          newprice: 2599,
          oldprice: 2899,
        },
         {
          img: require("../../../../../public/xiaxia/imgs/1.png"),
          name: "nava 9",
          baojia: "保价618",
          desc: "纤薄轻盈机身",
          newprice: 2599,
          oldprice: 2899,
        },
         {
          img: require("../../../../../public/xiaxia/imgs/1.png"),
          name: "nava 9",
          baojia: "保价618",
          desc: "纤薄轻盈机身",
          newprice: 2599,
          oldprice: 2899,
        },
        
      ],
    };
  },
};
</script>

<style scoped>
.promo_list > ul {
  padding: 0 0.15rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


.promo_list > ul > li {
  width: 1.09rem;
  height: 1.9rem;
  background-color: white;
  border-radius: 0.1rem;
  overflow: hidden;
  margin-bottom: .1rem;
text-align: center;
}
.figure_img1 {
  width: 1.09rem;
  height: 1.09rem;
  text-align: center;
  
}
.figure_img1 > img {
  width: .83rem;
  height: .83rem;
  margin: .13rem auto;
}

.good_title1 {
  padding: 0.05rem ;
}

.title_p {
  font-size: 0.12rem;
  font-weight: 600;
  height: 0.32rem;
  color: #333;
}

.title_p > span {
  color: white;
  color: rgb(207, 10, 44);
  font-size: .12rem;
  border-radius: 0.05rem;
}
.title_price1 {
  line-height: 0.16rem;
}
.title_desc1 {
  font-size: 0.12rem;
  margin-bottom: 0.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
.title_price1 > span {
  color: rgb(207, 10, 44);
  font-size: 0.14rem;
  font-weight: 600;
}
.title_price1 > del {
  font-size: .12rem;
  margin-left: 0.03rem;
}
</style>